<template>
  <div id="invoicePageItem">
    <router-view></router-view>
    <div class="cellDiv" v-show="!showErrorView">
      <InvoiceCell
        v-for="item in list"
        :item="item"
        :cellCancelClick="cellCancelClick"
      ></InvoiceCell>
    </div>

    <div class="bottomDiv" v-show="!showErrorView">
      <div class="contentDiv">
        <div class="leftDiv" @click="clickCheckbox">
          <img
            :src="checkboxDefault"
            v-show="!isCheckAll"
            class="chceckImg"
          />
          <img
            :src="checkboxSelect"
            v-show="isCheckAll"
            class="chceckImg"
          />

          <div class="title">全选</div>
        </div>

        <div class="button" @click="next">下一步</div>
      </div>
    </div>

    <div v-show="showErrorView" class="noOrder">
      <img :src="noOrder" class="img" />
      <div class="noOrderTitle">暂无订单~</div>
    </div>
  </div>
</template>

<script>
import InvoiceCell from "./InvoiceCell";
import { api_invoiceList } from "@/service/api/repair";

export default {
  name: "InvoicePageItem",
  data() {
    return {
      noOrder: require("@/images/background/noMessage.png"),
      showErrorView: false,
      list: [],
      current: 1,
      loading: false,
      finished: false,
      isRefresh: false,
      checkboxSelect: require("@/images/icon/checkbox_select.png"),
      checkboxDefault: require("@/images/icon/checkbox_default.png"),
      isCheckAll: false
    };
  },
  components: {
    InvoiceCell
  },
  props: {
    type: String
  },
  methods: {
    clickCheckbox() {

        if (this.isCheckAll == true){
            for (var i = 0; i < this.list.length; i++) {
                this.list[i]["isCheck"] = false;
            }
            this.isCheckAll = false;
        } else {
            for (var i = 0; i < this.list.length; i++) {
                this.list[i]["isCheck"] = true;
            }
            this.isCheckAll = true;
        }



    },
    cancel() {
      // for (var i = 0; i < this.list.length; i++) {
      //   this.list[i]["isCheck"] = false;
      // }
      // this.isCheckAll = false;
    },
    cellCancelClick() {
      this.isCheckAll = false;
    },
    next() {
      var ids = "";
      var price = 0;

      for (var i = 0; i < this.list.length; i++) {
        var item = this.list[i];
        if (item.isCheck == true) {
          if (ids === "") {
            ids = item.orderId;
          } else {
            ids = ids + "," + item.orderId;
          }
          price += item.orderPrice;
        }
      }

      if (ids === "") {
        this.$toast("请选择订单");
        return;
      }

      this.$router.push({
        name: "invoiceInfoPage",
        query: {
          orderids: ids,
          price: price
        }
      });
    },
    onLoad() {
      this.requestData(this.current);
    },
    onRefresh() {
      this.current = 1;
      this.isRefresh = true;
      this.list = [];
      this.finished = false;

      this.requestData(this.current);
    },
    requestData() {
      api_invoiceList()
        .then(res => {
          var dataList = res.data;
          for (var i = 0; i < dataList.length; i++) {
            dataList[i]["isCheck"] = false;
            this.list.push(dataList[i]);
          }

          if (this.list.length < 1) {
            this.showErrorView = true;
          } else {
            this.showErrorView = false;
          }
        })
        .catch(error => {
          this.showErrorView = true;
          this.$toast(error.message);
        });
    }
  },
  created() {
    this.requestData(this.current);
  }
};
</script>

<style scoped>
#invoicePageItem {
  height: 100%;
  width: 100%;
  padding-bottom: 7.5rem;
}
.listStyle {
  overflow-y: auto;
  max-height: 40rem;
}
.bottomDiv {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 5.3rem;
  background-color: white;
}
.chceckImg {
  width: 1rem;
  height: 1rem;
}
.contentDiv {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  height: 3.3rem;
  padding: 0 1.3333333333333333rem;
}
.leftDiv {
  display: flex;
  flex-direction: row;
  align-items: center;
  height: 100%;
  margin-left: 1.1rem;
}
.title {
  height: 1.3333333333333333rem;
  font-size: 0.9333333333333333rem;
  font-family: PingFangSC-Regular, PingFangSC;
  font-weight: 400;
  color: rgba(18, 28, 50, 1);
  line-height: 1.3333333333333333rem;
  margin-left: 0.7rem;
}
.button {
  width: 10.333333333333334rem;
  height: 2.6666666666666665rem;
  background: #397be6;
  border-radius: 1.6333333333333333rem;
  color: white;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.noOrder {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.img {
  width: 8.533333333333333rem;
  height: 8.533333333333333rem;
  margin-top: 10.8rem;
  margin-bottom: 1.4666666666666666rem;
}
.noOrderTitle {
  height: 1.5rem;
  font-size: 1.0rem;
  font-family: PingFangSC-Regular, PingFangSC;
  font-weight: 400;
  color: rgba(18, 28, 50, 1);
  line-height: 1.5rem;
}

.cellDiv {
}
</style>
